<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Run</title>

    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            position: absolute;
            top:0;
            left: 0;
        }
        .wrap{
            margin-top: 105px;
        }
    </style>
</head>
<body><div id="box"></div>
<div class="wrap">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
</div>
<script>
    var box=document.getElementById("box");
    var start = document.getElementById("start");
    var stop = document.getElementById("stop");



    var timer=null;
    var speed=10;

    start.onclick=function () {
        let num=0;
        if (timer == null) {
            timer=setInterval(function () {
                num+=speed;
                box.style.left=num+'px';

                if (num >= document.body.offsetWidth - box.offsetWidth||num<=0) {
                    speed=-speed;
                }
            },100)
        }
    }

    stop.onclick=function () {
        if (timer != null) {
            clearInterval(timer);
            timer=null;
            box.style.left=0;
        }
    }

</script>
</body>
</html>